<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>component</title>
</head>
<body>
    <div id="app">
        <h4>VUE的组件，为了复用代码</h4>
        <h5>组件传值：1.父传子  2.子传父</h5>
        <p>父传子：父组件将数据传给子组件</p>
        <p>子传父：子组件将数据传给父组件</p>
        <!-- 2.当作标签使用 -->
        <hut :year="year1"></hut>
        <hut :year="year2"></hut>
        <hut :year="year3"></hut>
        <blue :word="word1"></blue>
        <blue :word="word2"></blue>
    </div>

    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data:{
                year1: 2,
                year2: 3,
                year3: 4, 
                i: '',
                word1: ['1.金价西巴哟','2.耶斯莫拉','3.我不要蓝我要你'],
                word2: ['1.哥哥，躲雨','2.你又觉得你配','3.我的男人不过夜的'],
            },
            //1.注册组件
            components: {
                hut: {
                    template: ` <div>
                                <p>HUT</p>
                                <p>BLUE</p>
                                <p>{{year}}年了</p>
                                <button @click="welcome">恭喜</button>
                                </div>`,
                    props:['year'],
                    methods: {
                        welcome(){
                            alert(`恭喜${this.year}周年`)
                        }
                    },
                },
                
                blue: {
                    template: ` <div>
                                <p v-for="i in word">{{i}}</p>
                                <button @click="say">他说了什么？</button>
                                </div>`,
                    props:['word'],
                    methods: {
                        say(){
                            this.i = this.word;
                        }
                    }
                    
                }
            }
        })
    </script>
</body>
</html>